<script lang='ts' setup>
import { reactive,onMounted,ref} from 'vue'
import { ArrowLeft } from '@element-plus/icons-vue'
import OrderInfo from '/@/views/personnel/staffAchievement/components/OrderInfo.vue' 

const state = reactive({ 
	type: 1,
	total: 0, 
	pageNum: 1,
	pageSize: 10,
    tableData: [
		{
			id: 'YT435464758797', 
			job: '大螺丝',
			time: '2023-12-21 10:45:54',
			money: '22',
			price: 6985
		}
	] as Array<any>,
	typeList: [
		{ value: 1, label: '销售' },
		{ value: 2, label: '充值' },
		{ value: 3, label: '还款' },
		{ value: 4, label: '退款' },
		{ value: 5, label: '欠款' },
		{ value: 6, label: '划卡' },
		{ value: 7, label: '服务消耗' },
	],
    rowId: 0
}) 

const props = withDefaults(defineProps<{
    id: number, 
	back: Function
}>(), { 
	id: 0,
	back: () => {}
})
const showOrderInfo = ref(false)
const emit = defineEmits(['update:modelValue'])

const back = () => {
   props.back()
}

const handleSizeChange = () => {}
const handleCurrentChange = () => {}
const previewInfo = (row: any) => {
	showOrderInfo.value = true
}

const heidenInfo = () => {
	showOrderInfo.value = false
}
 
</script>

<template>
    <main>
		<el-card shadow="hover" class="mt15" v-show="!showOrderInfo">
			<section>
				<el-row :gutter="35" class="mb20" style="border-bottom: 1px solid #ededed;">
					<el-col :xs="22" :sm="22" :md="22" :lg="22" :xl="22"> 
						<el-form-item label="业绩类型">
							<el-select v-model="state.type" placeholder="请选择业绩类型"  style="width: 240px;">
								<el-option v-for="item in state.typeList" :key="item.value"
									:label="item.label" :value="item.value" />
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :xs="2" :sm="2" :md="2" :lg="2" :xl="2"> 
						<el-button  @click="back" :icon="ArrowLeft"  >返回</el-button>
					</el-col>
				</el-row>
				<el-row justify="end" class="mb20">
					<el-col :span="24" class="flex-end-center">
						<h3>
							综合业绩：<span class="color-danger">{{ 0 }}</span>&emsp;
							划卡业绩：<span class="color-danger">{{ 0 }}</span>&emsp;  
							消耗业绩：<span class="color-danger">{{ 0 }}</span> &emsp; 
							服务次数：<span class="color-danger">{{ 0 }}</span> &emsp; 
							手工费：<span class="color-danger">{{ 0 }}</span> 
						</h3>
					</el-col>
				</el-row>
			</section> 
			<section>
				<el-table :data="state.tableData" style="width: 100%"> 
					<el-table-column label="订单ID" prop="id">
						<template #default="scope">
							<span class="color-danger" style="cursor: pointer;" @click="previewInfo(scope.row)">{{ scope.row.id }}</span>
						</template>
					</el-table-column>
					<el-table-column label="商品" prop="name" />
					<el-table-column label="会员名" prop="buyCount" />
					<el-table-column label="订单金额" prop="price" />
					<el-table-column label="实收金额" prop="cellPrice" />
					<el-table-column label="业绩比例" prop="buyCount"  />
					<el-table-column label="销售时间" prop="time"  />
					<el-table-column label="操作时间" prop="time"  />
					
				</el-table>

				<section class="mt15">
					<el-row justify="end">
						<el-col :span="24" class="flex-end-center">
							<el-pagination
							v-model:current-page="state.pageNum"
							v-model:page-size="state.pageSize"
							:page-sizes="[10, 20, 30]"  
							:background="true"
							layout="total, sizes, prev, pager, next, jumper"
							:total="state.total"
							@size-change="handleSizeChange"
							@current-change="handleCurrentChange"
							/>
						</el-col>
					</el-row> 
				</section>
			</section>
		</el-card> 

		<OrderInfo v-show="showOrderInfo" :back="heidenInfo" />
    </main>
</template>

<style lang='scss' scoped>

</style>